<template>
	<div class="login">
		<div class="login01">
			<router-link to="/login">登录\</router-link>
			<router-link to="/enroll">注册</router-link>
		</div>
		<router-view />
		<van-form @submit="onSubmit" :validate-first="true" ref="form">
			<van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' },
				{ pattern:/^1[3-9]\d{9}$/,message: '格式错误'}]" />
			<van-field v-model="vercode" name="vercode" center clearable label="验证码" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入短信验证码' },
				{ pattern:/^\d{6}$/,message: '格式错误'}]">
				<template #button>
					<van-button size="small" @click="sendSms" native-type="button" type="primary">{{tips}}</van-button>
				</template>
			</van-field>
			<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' },
				{ validator:((val)=> /^\w{6,12}$/.test(val)), message: '密码格式错误' }]" />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">注册</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		loginApi,
		enrollApi,
		sendSms,
		del
	} from "@/api/user.js";
	let timer = null;
	export default {
		data() {
			return {
				username: '',
				password: '123456',
				vercode: '',
				clickable: true,
				tips: '发送验证码',
				tiem: 10,
				// loading: false
			};
		},
		beforeDestroy() {
			clearInterval(timer)
		},
		methods: {
			onSubmit(values) {
				console.log('submit', values);
				enrollApi(values).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.$toast(res.data.msg)
						let {
							uid,
							token,
							tokenExpired,
							userInof
						} = res;
						// localStorage.setItem('uid', uid)
						localStorage.setItem('token', token)
						localStorage.setItem('tokenExpired', tokenExpired)
						// localStorage.setItem('userInof', JSON.stringify(userInof))

						setTimeout(v => {
							this.$router.back()
						}, 500)
					} else {
						this.$toast(res.data.msg)
					}
				})
			},
			//发送验证码
			sendSms() {
				if (!this.clickable) return //如果是不可点击的状态就让逻辑返回
				this.$refs.form.validate('username').then(res => {
					let {
						username: mobile
					} = this;
					//枷锁
					this.clickable = false;
					this.tips = '请求中...'

					return sendSms({
						type: 'register',
						mobile
					}).then(({
						code,
						data,
						msg
					}) => {
						if (data.code == 0) {
							this.$toast(data.msg);

							this.tips = this.tiem + 's后再次获取';

							timer = setInterval(v => {
								this.tiem--;
								this.tips = this.tiem + 's后再次获取';
								if (this.tiem <= 0) {
									this.tips = '再次发送';
									this.tiem = 10;
									clearInterval(timer)
									this.clickable = true;
								}
							}, 1000)
						} else {
							this.$toast(data.msg);
							this.clickable = true;
						}
					}).catch(err => {
						console.log(err)
						this.clickable = true;
					})
				})
			}
		},
	};
</script>

<style>
	.login01 {
		background-color: #e54b43;
		height: 40px;
		text-align: center;
	}

	.login01 a {
		color: #fff;
		line-height: 40px;
	}
</style>
